<!DOCTYPE html>
<html class="ui-page-login">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content img {
				display: block;
				margin: 20px auto;
				border-radius: 50%;
			}

			.mui-btn {
				padding: 10px;
				background-color: #c9394a;
				border: 0;
			}

			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}

			.link-area a {
				color: #c9394a;
			}

			.link-area .spliter {
				color: #bbb;
				padding: 0px 8px;
			}
		</style>
	</head>
	<body>
		<!-- 快捷键[mheader] -->
		<header class="mui-bar mui-bar-nav chat-topbg">
			<h1 class="mui-title chat-topcolor"><b>okCHAT</b></h1>
		</header>
		<!-- 快捷键[mbody] -->
		<div class="mui-content">
			<!-- 用户头像 -->
			<img src="images/head.png" alt="okCHAT" width="100" height="100">
			<!-- 登陆表单 快捷键[mForm] -->
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input id="username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>
			<!-- 登陆按钮 -->
			<div class="mui-content-padded mt25">
				<button id="loginBtn" class="mui-btn mui-btn-block mui-btn-primary">登录</button>
				<div class="link-area">
					<a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
				</div>
			</div>
			<!-- 三方登陆 -->
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script>
			// 快捷键[minit]
			mui.init({});

			// 快捷键[mpl]
			mui.plusReady(function() {
				// 设置系统状态栏背景颜色
				plus.navigator.setStatusBarBackground("#c9394a");
				// 设置系统状态栏样式
				plus.navigator.setStatusBarStyle("light");
				
				/**
				 * 若用户已登陆,则直接跳转页面
				 */
				var userInfo = app.getUserInfo();
				if (userInfo != null) {
					mui.openWindow("index.html", "index.html");
				}
				
				/**
				 * 用户登录事件
				 */
				document.getElementById("loginBtn").addEventListener("click", function() {
					var username = document.getElementById("username");
					var password = document.getElementById("password");
					// 数据校验
					if (!app.isNotBlank(username.value)) {
						app.toast("账号不能为空", "error")
						username.focus();
					} else if (!app.isNotBlank(password.value)) {
						app.toast("密码不能为空", "error")
						password.focus();
					} else {
						// 异步请求后台api
						var clientid = plus.push.getClientInfo().clientid;
						mui.ajax(app.serverUrl + "/login", {
							beforeSend: function() {},
							complete: function() {},
							data: {
								username: username.value,
								password: password.value,
								clientid: clientid
							},
							dataType: "json",
							type: "post",
							timeout: 10000,
							headers: {
								"Content-Type": "application/x-www-form-urlencoded"
							},
							success: function(data) {
								if (data.status == 1000) {
									// 保存用户登陆信息
									app.setUserInfo(data.data);
									// 跳转页面
									mui.openWindow("index.html", "index.html");
								} else {
									app.toast(data.msg, "error")
								}
							},
							error: function(xhr, type, errorThrown) {
								console.log(type);
								app.toast("服务器错误", "error");
							}
						});
					}
				});
				
				/**
				 * TODO 第三方登录
				 */
				var oauthArea = document.querySelector('.oauth-area');
			});
		</script>
	</body>
</html>
